<template>
	<div class="sidebar-container">
		
		<div class="pc">
			<div class="sidebar" :class="{ 'sidebar-visible': isSidebarOpen }" @click.stop="stopPropagation">
				<!-- 侧面栏内容 -->
				<div style="color: #f0f0f0;height: 80px;" class="">
				<!-- 	这里是logo -->
					<p style="color: #a7a3a3;text-align: right;padding-right: 25px;">当前版本：v0.2.10</p>
				</div>
				<div style="" class="qhButton">
					<button @click="active=index" :class="{active:index==active}"
						style="height: 50px;width:80%; margin-bottom: 10px;border-radius: 15px;  display: flex;align-items: center;cursor: pointer;"
						:style="{'background':item.color}" v-for="(item,index) in mean"><img style="position: absolute"
							width="30" height="30" :src="item.imgurl" alt="" /> <span
							style="margin: 0 auto;font-size: 16px;">{{item.name}}</span></button>
				</div>
				<div class="bottomBox">
					<div class="box1" v-if="active==0">
						<!-- <div class="">
							<p>当前对话</p>
							<el-select v-model="dqdhValue" placeholder="请选择">
								<el-option v-for="item in dhoptions" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div> -->
						<div class="">
							<p>选择对话模式</p>
							<el-select v-model="parentForm.dhMsValue" placeholder="请选择" @change="changeDhType">
								<el-option v-for="item in dhhmsOptions" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="">
							<p>选择LLM模型</p>
							<el-select v-model="parentForm.model_name" placeholder="请选择">
								<el-option v-for="item in mxoptions" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="">
							<p>选择prompt模板</p>
							<el-select v-model="parentForm.prompt_name" placeholder="请选择">
								<el-option v-for="item in Promptoptions" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="">
							<p>Temperature:</p>
							<div class="block">

								<el-slider style="width: 350px;" persistent='true' :step='0.01' :max="2"
									v-model="parentForm.temperature"></el-slider>
							</div>
							<div class=""
								style="display: flex;flex-flow: row;justify-content: space-between;color: #EBEBEB;">
								<span>0.00</span>
								<span>2.00</span>
							</div>
						</div>
						<!-- <div class="">
							<p>历史对话轮数</p>
							<el-input-number style="width:350px ;" v-model="dhnum" @change="handleChange" :min="1" :max="10"
								label="描述文字"></el-input-number>
			
						</div> -->
						<div v-if="isllmChat!==0 && isllmChat!==4" style="margin-top: 20px;" class="">
							<el-collapse style="" v-model="activeNames" @change="handleChange">
								<el-collapse-item :title="dhTypeValue" name="1">
									<div v-if="isllmChat==2" class="">
										<el-upload class="upload-demo" drag ref="upload"
											action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList"
											:on-preview="handlePreview" :on-remove="handleRemove" :auto-upload="false"
											multiple>
											<i class="el-icon-upload"></i>
											<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
											<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
										</el-upload>
										<p style="text-align: center;"><el-button style="width: 150px;"
												type="">开始上传</el-button>
										</p>

									</div>

									<div v-if="isllmChat==1" class="xyxK">
										<p>请选择知识库：</p>
										<el-select v-model="parentForm.zskValue" placeholder="请选择">
											<el-option v-for="item in zskOptions" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
									</div>
									<div v-if="isllmChat==3" class="xyxK">
										<p>请选择搜索引擎：</p>
										<el-select v-model="parentForm.searchEngine" placeholder="请选择">
											<el-option v-for="item in searchEngineOptions" :key="item.value"
												:label="item.label" :value="item.value">
											</el-option>
										</el-select>
									</div>
									<div v-if="isllmChat==3" class="xyxK">
										<p>匹配搜索结果条数：</p>
										<el-input-number style="width:304px ;" v-model="parentForm.top_k"
											@change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>

									</div>
									<div v-if="isllmChat==1 ||isllmChat==2" class="xyxK">
										<p>匹配知识条数：</p>
										<el-input-number style="width:304px ;" v-model="parentForm.top_k"
											@change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>

									</div>
									<div v-if="isllmChat==1 ||isllmChat==2" class="xyxK">
										<p>知识匹配分数阈值：</p>
										<div class="block">

											<el-slider persistent='true' :step='0.01' :max="2"
												v-model="parentForm.zsYz"></el-slider>
										</div>
										<div class=""
											style="display: flex;flex-flow: row;justify-content: space-between;color: #EBEBEB;">
											<span>0.00</span>
											<span>2.00</span>
										</div>
									</div>
								</el-collapse-item>

							</el-collapse>
						</div>


						<div class="" style="display: flex;justify-content: center;margin-top: 20px;">
							<!-- <el-button style="width: 150px;" type="">导出记录</el-button> -->
							<el-button style="width: 150px;" @click="clear()" type="">清空对话</el-button>
						</div>
					</div>
					<div v-if="active==1" class="box2">
						<div class="">
							<p>查询关键字</p>
							<el-input v-model="input" placeholder="请输入内容"></el-input>
						</div>
						<div class="">
							<p>匹配条数</p>
							<div class="block">

								<el-slider style="width: 350px;" persistent='true' v-model="value3"></el-slider>
							</div>
						</div>
					</div>
					<div v-if="active==2" class="box3">

					</div>

				</div>
			</div>
			<div v-if="active==0 && !ismobile">
				<DataAnalysis ref="childRef" :message="parentForm"></DataAnalysis>
			</div>
			<div v-if="active==1" @click="toggleSidebar">

				<zhiShiKu></zhiShiKu>




				<!-- 主内容区域，点击时关闭侧面栏 -->
				<!-- <button @click.stop="toggleSidebar">切换侧面栏</button> -->
			</div>
			<div v-if="active==2">
				<XunLian></XunLian>
			</div>
		</div>

		<div v-if="ismobile" class="mobile">
			<sjDataAnalysis ref="childRef" :message="parentForm"></sjDataAnalysis>
		</div>
	</div>
</template>

<script>
	import DataAnalysis from '@/components/DataAnalysis.vue';
	import sjDataAnalysis from '@/components/shouji/sjDataAnalysis.vue';
	import XunLian from '@/components/XunLian.vue';
	import zhiShiKu from '@/components/zhiShiKu.vue';
	import {
		getZskOptions,

	} from '../api/chat.js'
	import {isMobileDevice} from '../utils/isMobile.js'
	export default {
		components: {
			sjDataAnalysis,
			DataAnalysis,
			XunLian,
			zhiShiKu

		},
		data() {
			return {
			
				fileList: [{
					name: 'food.jpeg',
					url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
				}, {
					name: 'food2.jpeg',
					url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
				}],
				parentForm: {
					dhMsValue: 'chat',
					model_name: 'Qwen1.5-7B-Chat',
					prompt_name: 'default',
					temperature: 1.13,
					zskValue: '',
					zsYz: 0.5,
					// searchEngine: 'duckduckgo',
					top_k: 3,
					stream: false,
					max_tokens: 0,

				},
				dhnum: 3,
				zskOptions: [],
				isllmChat: 0,
				dhTypeValue: '',
				Promptoptions: [{
						value: 'default',
						label: 'default'
					},
					// {
					// 	value: 'with_history',
					// 	label: 'with_history'
					// }, {
					// 	value: 'py',
					// 	label: 'py'
					// },
				],
				mxoptions: [{
					value: 'Qwen1.5-7B-Chat',
					label: 'Qwen1.5-7B-Chat(Runing)',
				}, ],
				searchEngineOptions: [{
					value: 'duckduckgo',
					label: 'duckduckgo',
				}, {
					value: 'bing',
					label: 'bing',
				}, {
					value: 'metaphor',
					label: 'metaphor',
				}, ],



				dhoptions: [{
					value: '1',
					label: '默认'
				}],
				dhhmsOptions: [{
						id: 0,
						value: 'chat',
						label: 'LLM对话',
					},
					{
						id: 1,
						value: 'knowledge_base_chat',
						label: '知识库问答',
						name: '知识库',

					},
					// {
					// 	id: 2,
					// 	value: 'file_chat',
					// 	label: '文件对话',
					// 	name: '文件对话'
					// }, {
					// 	id: 3,
					// 	value: 'search_engine_chat',
					// 	label: '搜索引擎问答',
					// 	name: '搜索引擎'
					// },
					// {
					// 	id: 4,
					// 	value: 'agent_chat',
					// 	label: '自定义Agent问答',

					// }
				],
				checked: false,

				value3: 3,
				input: '',
				num: '1',

				activeNames: ['1'],
				dqdhValue: '1',
				active: 0,
				isSidebarOpen: false,
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, ],
				mean: [{
						name: '对话',
						color: "#A2EF4D",
						imgurl: require('../assets/chat.png')
					}, {
						name: '知识库管理',
						color: "#E99D42",
						imgurl: require('../assets/shujuku.png')
					},
					{
						name: '训练模型 ',
						color: "#34fff2",
						imgurl: require('../assets/xunlian.png')
					},
				],
			};
		},
		watch: {
			'parentForm.dhMsValue': {
				handler(newVal, oldVal) {
					debugger
					console.log(newVal)
					if (newVal == 'chat') {
						this.Promptoptions = [{
								value: 'default',
								label: 'default'
							},
							// {
							// 	value: 'with_history',
							// 	label: 'with_history'
							// }, {
							// 	value: 'py',
							// 	label: 'py'
							// },
						]

					} else if (newVal == 'file_chat' || newVal == 'knowledge_base_chat') {
						this.Promptoptions = [{
								value: 'default',
								label: 'default'
							},
							{
								value: 'text',
								label: 'text'
							}, {
								value: 'empty',
								label: 'empty'
							},
						]
					} else if (newVal == 'search_engine_chat') {
						this.Promptoptions = [{
							value: 'default',
							label: 'default'
						}, {
							value: 'search',
							label: 'search'
						}]
					} else {
						this.Promptoptions = [{
							value: 'default',
							label: 'default'
						}, {
							value: 'ChatGLM3',
							label: 'ChatGLM3'
						}]
					}
				},
				deep: true // 注意：这里其实不需要 deep: true，因为我们是直接监听对象属性  
			}
		},
		computed: {
			ismobile() {
				return isMobileDevice();
			}
		},

		methods: {
			submitUpload() {
				this.$refs.upload.submit();
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},

			changeDhType(row) {
				this.dhTypeValue = this.getDhlabel(row).name
				this.isllmChat = this.getDhlabel(row).id
				if (this.isllmChat == 1) {
					getZskOptions().then((res) => {
						let res_2 = JSON.parse(JSON.stringify(res))
						if (res_2.code == 200) {

							let optionsObjectArray = res_2.data.map((label, index) => ({
								value: label, // 假设你想要从 1 开始的索引作为 value  
								label: label
							}));
							this.zskOptions = optionsObjectArray
							this.parentForm.zskValue = this.zskOptions[0].value
						}
					})
				}

			},
			getDhlabel(row) {
				const optionMap = {};
				this.dhhmsOptions.forEach(option => {
					optionMap[option.value] = { // 如果你只需要label，则可以使用 option.label 代替这个对象  
						name: option.name,
						label: option.label,
						id: option.id
					};
				});
				return {
					name: optionMap[row].name + '配置',
					id: optionMap[row].id
				}

			},
			clear() {
				this.$refs.childRef.clear();

			},

			toggleSidebar() {
				// this.isSidebarOpen = !this.isSidebarOpen;
			},
			stopPropagation() {
				// 阻止事件冒泡，仅在需要时使用  
			},
			handleChange() {}
		},
	};
</script>

<style scoped>
	/* 修改选择框的背景色 */
	>>>.el-select .el-input__inner {
		background-color: #000000;
		/* border: none; */
		border-color: #b9b9b9;
		width: 350px;
		margin-bottom: 10px;
		border-radius: 10px;
		color: #fff;
	}

	>>>.el-input__inner::-webkit-input-placeholder {

		color: #fff;

	}


	.sidebar-container {
		position: relative;
		overflow: hidden;
		height: 100vh;
		/* 确保侧边栏与视口高度一致 */
	}

	.sidebar {
		position: absolute;
		top: 0;
		right: 0;
		width: 400px;
		/* 侧边栏的固定宽度 */
		height: 97%;
		background-color: #42434f;
		transition: transform 0.3s ease;
		z-index: 100;
		/* 确保侧边栏在主内容之上 */
		transform: translateX(00);
		padding: 10px 10px;
		/* 初始状态：完全隐藏 */
		overflow: auto;
	}

	.sidebar-visible {
		transform: translateX(100%);
		/* 可见状态：完全显示 */
	}

	.main-content {
		margin-left: 300px;
		/* 为侧边栏腾出空间 */
		/* 其他样式... */
	}

	.main-content p {
		font-size: 14px;
		color: #BEBEBE;
	}

	.active {
		background: #e8eae4 !important;
		box-shadow: 1px 1px 10px #dadada;
	}

	.bottomBox {
		width: 80%;
		display: flex;
		flex-flow: column;
		align-items: center;
		margin: 0 auto;
	}

	.bottomBox p {
		color: #BEBEBE;
		font-size: 14px;
		margin-bottom: 5px;
	}

	.hfGG p {
		color: #555555;
		margin: 0;
		font-size: 16px;
	}

	.qhButton {
		width: 80%;
		background: #0c0f15;
		margin: 0 auto;
		border-radius: 20px;
		padding: 15px;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		align-items: center;
	}

	>>>.el-upload-dragger {
		width: 300px;
	}

	@media screen and (max-width: 768px) {
		.pc {
			/* 小屏幕下的样式 */
			display: none;
		}

		.mobile {
			display: block;
		}


	}
</style>